<template>
    <transition name="message-fade" @after-leave="handleAfterLeave">
        <div
        :class="['uap-message',
        type ? `uap-message--${ type }` : '',
        center ? 'uap-center' : '',
        ]"
        :style="{ 'top': top + 'px' }"
        v-show="visible"
        >
            <div :class=" ['message-content',`message-content-${ type }`]">{{message}}</div>

        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            message: '',
            duration: 3000,
            top: 20,
            visible: false,
            timer: null,
            center: false,
            onClose: null,
            type: 'info',
        }
    },
    methods: {
        handleAfterLeave() {
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },
        startTimer() {
            if (this.duration > 0) {
                this.timer = setTimeout(() => {
                    if (this.visible) {
                        this.close();
                    }
                }, this.duration);
            }
        },
        close() {
            this.visible = false;
            if (typeof this.onClose === 'function') {
                this.onClose(this);
            }
        }
    },
    mounted() {
        this.startTimer();
    }
}
</script>

<style lang="scss" scoped>
.uap-message{
    min-width:380px;
    box-sizing:border-box;
	border-radius:4px;
	border:1px solid #EBEEF5;
    position:fixed;
	left:50%;
    top:20px;
    transform:translateX(-50%);
    background-color:#edf2fc;
    transition:opacity .3s, transform .4s,top .4s;
    overflow:hidden;
    padding:15px 15px 15px 20px;
    display:flex;
    align-items:center;
}
.uap-message.uap-center{
    justify-content:center
}
.uap-message--success{
    background-color:#f0f9eb;
    border-color:#e1f3d8;
}
.uap-message--warning{
    background-color:#fdf6ec;
    border-color:#faecd8;
}
.message-content{
    font-size:14px;
}
.uap-message--error{
    background-color:#fef0f0;
    border-color:#fde2e2;
}
.message-content-info{
    color:#909399;
}
.message-content-warning{
    color:#E6A23C;
}
.message-content-error{
    color:#F56C6C;
}
.message-content-success{
    color:#67C23A;
}
.message-fade-enter,.message-fade-leave-active{
    opacity:0;
    transform:translate(-50%,-100%);
}

</style>
